<template>
  <div>
    <h3>签字功能演示（控制按钮显示）</h3>
    
    <!-- 父组件控制按钮（用于调用子组件方法） -->
    <div style="margin-bottom: 20px; gap: 12px; display: flex; flex-wrap: wrap;">
      <el-button type="primary" @click="callChildConfirm">父组件：确认签字</el-button>
      <el-button type="warning" @click="callChildReset">父组件：重新签字</el-button>
      <el-switch v-model="isShowChildButtons" label="显示子组件内置按钮" />
    </div>

    <!-- 子组件：通过showButtons控制内置按钮显示（默认true） -->
    <Signature 
      ref="signatureRef" 
      @signatureConfirm="handleSignatureReceive" 
      :show-buttons="isShowChildButtons" 
    />

    <!-- 签字预览 -->
    <div v-if="receivedSignature" class="signature-preview" style="margin-top: 20px;">
      <h4>签字预览：</h4>
      <img 
        :src="receivedSignature" 
        alt="签字预览" 
        style="max-width: 500px; border: 1px solid #eee; border-radius: 8px;" 
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, type Ref } from 'vue'
import Signature from '@/components/commons/signature/index.vue'

const signatureRef = ref<InstanceType<typeof Signature> | null>(null)
const receivedSignature = ref('')
const isShowChildButtons = ref(true) // 控制子组件按钮显示，默认true

// 父组件调用子组件方法（隐藏子组件按钮后，可通过父组件按钮操作）
const callChildConfirm = () => signatureRef.value?.confirmSignature()
const callChildReset = () => {
  signatureRef.value?.resetSignature()
  receivedSignature.value = ''
}

// 接收子组件确认事件
const handleSignatureReceive = (base64: string) => {
  receivedSignature.value = base64
  console.log('父组件接收的签字Base64：', base64)
}
</script>